<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式瀑布流图片墙-Demo展示，桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        body{background: #eee;}
        .outer{}
        h3{text-align: center;margin-bottom: 10px}
        .container{text-align: center}
        .column-item,.column-item-blank{width: 200px;display:inline-block;vertical-align: top;margin: 0 10px;}
        .column-item .img-box{width: 190px;border: 1px solid #ccc;display: block;padding: 4px;margin-bottom: 10px;}
        .column-item img{width:100%;border: none;}
    </style>
</head>
<body>
    <div class="outer">
        <h3>响应式瀑布流图片墙</h3>
        <div class="container"></div>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //瀑布流插件封装
        (function($){
            $.fn.waterFall=function(options){
                var defaults={
                    columnWidth: 200,
                    random : false,
                    imgUrlPrefix:"",
                    spacing:20
                };
                var opts = $.extend(defaults,options);
                var current = $(this);
                var imgArray;
                init();
                resize();
                scroll();
                //初始化
                function init(){
                    //初始化前页面页面
                    current.html("");
                    imgArray = opts.imgUrl.slice()
                    var viewPortWidth = $("html,body").width();
                    var columnWidth = opts.columnWidth + opts.spacing;
                    var number = viewPortWidth / columnWidth - 1;
                    for(var i = 0;i<number;i++){
                        current.append('<span class="column-item"></span>');
                        //首次每列加载5次
                        for(var j = 0;j < 5;j++){
                            var imgUrl = getImgUrl();
                            if(!imgUrl) return false;
                            var element = '<a class="img-box"><img src="'+imgUrl+'"></a>';
                            current.find(".column-item").eq(i).append(element);
                        }
                    }
                    current.append('<span class="column-item-blank"></span>');
                }
                //resize
                function resize(){
                    $(window).resize(function(){
                        var containerY = current[0].offsetTop;
                        var BlankY = current.find(".column-item-blank")[0].offsetTop;
                        var lastY = current.find(".column-item").last()[0].offsetTop;
                        //如果填充列跳到首行或最后一列跳到第二行，则重新渲染
                        if(containerY == BlankY || lastY != containerY) init();
                    });
                }
                //scroll
                function scroll(){
                    $(window).scroll(function(){
                        var bodyHeight = $("html,body").height();
                        var windowHeight = $(window).height();
                        var scrollTop = $(window).scrollTop();
                        if(bodyHeight - windowHeight - scrollTop < 20){
                            current.find(".column-item").each(function(){
                                var imgUrl = getImgUrl();
                                if(!imgUrl) return false;
                                var element = '<a class="img-box"><img src="'+imgUrl+'"></a>';
                                $(this).append(element);
                            });
                        }
                    });
                }
                //生成图片路径
                function getImgUrl(){
                    if(imgArray.length == 0) return false;
                    if(opts.random){
                        var random = parseInt(Math.random()*imgArray.length);
                        var imgUrl = imgArray[random];
                        imgArray.splice(random,1);
                        return opts.imgUrlPrefix + imgUrl + "?v" + Math.random() * 999;
                    }else{
                        return opts.imgUrlPrefix + imgArray.shift() + "?v" + Math.random() * 999;
                    }
                }
            };
        })(jQuery);
        //统一执行入口
        $(function(){
            $(".container").waterFall({
                columnWidth: 200,
                Spacing: 20 ,
                imgUrlPrefix : "/public/images/index/demo/demo_03/",
                imgUrl : [
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "02.jpg","01.jpg","04.jpg","03.jpg","01.jpg",
                    "02.jpg","01.jpg","05.jpg","03.jpg","05.jpg",
                    "03.jpg","02.jpg","01.jpg","03.jpg","05.jpg",
                    "03.jpg","05.jpg","03.jpg","01.jpg","05.jpg",
                    "05.jpg","01.jpg","03.jpg","03.jpg","05.jpg",
                    "04.jpg","01.jpg","03.jpg","04.jpg","05.jpg",
                    "04.jpg","05.jpg","03.jpg","04.jpg","01.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
                    "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"
                ],
            });
        })
    </script>
</body>
</html>